<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .cvs{
      border: solid 1px black;
    }
  </style>
</head>
<body>
  <canvas class="cvs"></canvas>
</body>
<script>

  const cvs = document.querySelector(".cvs")

  cvs.width = 400;
  cvs.height = 400;

  const ctx = cvs.getContext("2d")

  // ctx.beginPath();
  // ctx.moveTo(100, 100);
  // ctx.lineTo(200, 20);
  // ctx.lineTo(380, 100);
  // ctx.stroke();

  // 二阶的贝塞尔曲线
  // ctx.beginPath();
  // ctx.moveTo(100, 100);
  // ctx.quadraticCurveTo(200, 20, 380, 100);
  // ctx.stroke();
  
  // ctx.beginPath();
  // ctx.moveTo(140, 300);
  // ctx.lineTo(100, 170);
  // ctx.lineTo(260, 230);
  // ctx.lineTo(300, 300);
  // ctx.stroke();
  
  // 三阶的贝塞尔曲线
  // ctx.beginPath();
  // ctx.moveTo(140, 300);
  // ctx.bezierCurveTo(100, 170, 260, 230, 300, 300)
  // ctx.stroke();

  // 多阶
  // ctx.beginPath();
  // ctx.moveTo(75, 25);
  // ctx.quadraticCurveTo(25, 25, 25, 62.5);
  // ctx.quadraticCurveTo(25, 100, 50, 100);
  // ctx.quadraticCurveTo(50, 120, 30, 125);
  // ctx.quadraticCurveTo(60, 120, 65, 100);
  // ctx.quadraticCurveTo(125, 100, 125, 62.5);
  // ctx.quadraticCurveTo(125, 25, 75, 25);
  // ctx.stroke();

  // ctx.moveTo(75, 40);
  // ctx.bezierCurveTo(75, 37, 70, 25, 50, 25);
  // ctx.bezierCurveTo(20, 25, 20, 62.5, 20, 62.5);
  // ctx.bezierCurveTo(20, 80, 40, 102, 75, 120);
  // ctx.bezierCurveTo(110, 102, 130, 80, 130, 62.5);
  // ctx.bezierCurveTo(130, 62.5, 130, 25, 100, 25);
  // ctx.bezierCurveTo(85, 25, 75, 37, 75, 40);
  // ctx.stroke();



</script>
</html>